import React, {useEffect} from 'react';
import {NavBar} from 'antd-mobile'
// @ts-ignore
import {connect} from 'dva'
import { DotLoading } from 'antd-mobile'

function Cinemas(props:any) {

  useEffect(() => {
    console.log(props.list)
      if (props.list.length === 0){
        props.dispatch({
          type:'cinemaList/getList',
          payload:{
            cityId: props.cityId
          }
        })
      }else {
        console.log('已经缓存')
      }
  },[props.cityId])

  return (
    <div>
      <NavBar onBack={() => {
        // console.log(props.cityName,props.cityId)

        // 清空 cinemaList 数据
        props.dispatch({
          type:'cinemaList/clearList'
        })

        props.history.push('/city')
      }} back={props.cityName} backArrow={false}>
        标题
      </NavBar>

      {/* antd 加载中 */}
      {props.loading && <span style={{ fontSize: 14 }}>
          <DotLoading />
      </span>}

      <ul>
        {props.list.map((item:any) =>
          <li key={item.cinemaId}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default connect((state:any) => {
  return{
    loading: state.loading.global,
    cityName: state.city.cityName,
    cityId: state.city.cityId,
    list: state.cinemaList.list
  }
})(Cinemas)
